<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>STEAM在线教育平台</title>
        <meta name="description" content="Pushy is an off-canvas navigation menu for your website.">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <link rel="icon" type="text/css" href="sources/img/favicon.ico">
        <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="sources/css/dashboard.css">
        <link rel="stylesheet" type="text/css" href="assets/css/ie10-viewport-bug-workaround.css"">
        <link rel="stylesheet" type="text/css" href="sources/css/signin.css">
        <link rel="stylesheet" href="sources/css/normalize.css">
        <link rel="stylesheet" href="sources/css/demo.css">
        <!-- Pushy CSS -->
        <link rel="stylesheet" href="sources/css/pushy.css">
        
        <!-- jQuery -->
        <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
        <script src="assets/js/ie-emulation-modes-warning.js"></script>
        <style type="text/css">
            .title{
                color:#FFF;
                
            }
            .img-circle{
                width: 120px;
                height:120px;
                margin-left: 19px;
            }
            .userinfo{
                text-align:center;
                color: white;
            }
            .container{
                text-align: center;
            }
            .img{
                text-align: center;
            }
            .pull-right{
                margin-right: 30px;
            }
        </style>
    </head>
    <body>

        <div class="contaner">
            <nav class="navbar navbar-default navbar-inverse">
              <div class="container">
                <span class="title h2">STEAM在线教育平台</span>
                <ul class="nav nav-pills">
                  <li role="presentation" class="active"><a href="#">首页</a></li>
                  <li role="presentation"><a href="#">创作</a></li>
                  <li role="presentation"><a href="sources/stu_product/index.html">作品</a></li>
                  <li role="presentation"><a href="#">课程</a></li>
                  <li role="presentation"><a href="competition/index.html">赛事</a></li>
                  <li role="presentation"><a href="#">下载</a></li>
                  <!-- Indicates a successful or positive action -->
                  <div class="pull-right">
                      <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">
                        注册
                      </button>
                      <button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal">  登录
                      </button>
                  </div>
                </ul>
              </div>
            </nav>
        </div>
        <!-- Pushy Menu -->
        <nav class="pushy pushy-left" data-focus="#first-link">
            <div class="pushy-content">
                <ul>
                    <li class="pushy-submenu">
                        <div class="container">
                            <img src="sources/img/test.jpg" alt="..." class="img-responsive img-circle">
                        </div>
                        <p class="userinfo">name<br>id:888-888-8888</p>
                        <button id="first-link">我的学生</button>
                        <ul>
                            <li class="pushy-link"><a href="#">学生信息</a></li>
                            <li class="pushy-link"><a href="sources/stu_product/index.html">学生作品</a></li>
                            <li class="pushy-link"><a href="#">学生群</a></li>
                        </ul>
                    </li>
                    <li class="pushy-submenu">
                        <button>教师信息</button>
                        <ul>
                            <li class="pushy-link"><a href="#">所教课程</a></li>
                            <li class="pushy-link"><a href="#">我的学习</a></li>
                            <li class="pushy-link"><a href="#">我的作品</a></li>
                            <li class="pushy-link"><a href="#">教师排名</a></li>
                        </ul>
                    </li>
                    <li class="pushy-submenu">
                        <button>隐私中心</button>
                        <ul>
                            <li class="pushy-link"><a href="#">完善个人信息</a></li>
                            <li class="pushy-link"><a href="#">修改密码</a></li>
                            <li class="pushy-link"><a href="#">账户设置</a></li>
                        </ul>
                    </li>
                    <li class="pushy-submenu">
                        <button>线上工具</button>
                        <ul>
                            <li class="pushy-link"><a href="#">Mixly</a></li>
                            <li class="pushy-link"><a href="../BlocksCAD">BlocksCAD</a></li>
                            <li class="pushy-link"><a href="#">Mind Online</a></li>
                        </ul>
                    </li>
                    <li class="pushy-link"><a href="#">开设课程</a></li>
                    <li class="pushy-link"><a href="#">课程库添加</a></li>
                    <li class="pushy-link"><a href="#">论坛</a></li>
                    <li class="pushy-link"><a href="#">其他</a></li>
                </ul>
            </div>
        </nav>

        <!-- Site Overlay -->
        <div class="site-overlay"></div>

        <!-- Your Content -->
        <div id="contaner">
            <!-- Menu Button -->
            <button class="menu-btn">&#9776; 菜单</button>
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">注册框</h4>
                  </div>
                  <div class="modal-body">
                    <form class="form-signin">
                        <h2 class="form-signin-heading" style="text-align: center">注册信息</h2>
                        <label for="inputEmail" class="sr-only">邮箱地址</label>
                        <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
                        <label for="inputPassword" class="sr-only">密码</label>
                        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
                        <div class="checkbox" style="text-align: center">
                          <label>
                            <input type="checkbox" value="remember-me"> 记住密码
                          </label>
                        </div>
                        <button class="btn btn-lg btn-primary btn-block" type="submit">开始注册</button>
                    </form>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                  </div>
                </div>
              </div>
            </div>

            <div class="container">

              <h1 class="page-header">Dashboard</h1>

          <div class="row placeholders">
            <div class="col-xs-6 col-sm-3 placeholder">
              <img src="" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
              <h4>Label</h4>
              <span class="text-muted">Something else</span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
              <img src="" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
              <h4>Label</h4>
              <span class="text-muted">Something else</span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
              <img src="" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
              <h4>Label</h4>
              <span class="text-muted">Something else</span>
            </div>
            <div class="col-xs-6 col-sm-3 placeholder">
              <img src="" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
              <h4>Label</h4>
              <span class="text-muted">Something else</span>
            </div>
          </div>

          <h2 class="sub-header">Section title</h2>
          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                  <th>Header</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1,001</td>
                  <td>Lorem</td>
                  <td>ipsum</td>
                  <td>dolor</td>
                  <td>sit</td>
                </tr>
                <tr>
                  <td>1,002</td>
                  <td>amet</td>
                  <td>consectetur</td>
                  <td>adipiscing</td>
                  <td>elit</td>
                </tr>
                <tr>
                  <td>1,003</td>
                  <td>Integer</td>
                  <td>nec</td>
                  <td>odio</td>
                  <td>Praesent</td>
                </tr>
                <tr>
                  <td>1,003</td>
                  <td>libero</td>
                  <td>Sed</td>
                  <td>cursus</td>
                  <td>ante</td>
                </tr>
                <tr>
                  <td>1,004</td>
                  <td>dapibus</td>
                  <td>diam</td>
                  <td>Sed</td>
                  <td>nisi</td>
                </tr>
                <tr>
                  <td>1,005</td>
                  <td>Nulla</td>
                  <td>quis</td>
                  <td>sem</td>
                  <td>at</td>
                </tr>
                <tr>
                  <td>1,006</td>
                  <td>nibh</td>
                  <td>elementum</td>
                  <td>imperdiet</td>
                  <td>Duis</td>
                </tr>
                <tr>
                  <td>1,007</td>
                  <td>sagittis</td>
                  <td>ipsum</td>
                  <td>Praesent</td>
                  <td>mauris</td>
                </tr>
                <tr>
                  <td>1,008</td>
                  <td>Fusce</td>
                  <td>nec</td>
                  <td>tellus</td>
                  <td>sed</td>
                </tr>
                <tr>
                  <td>1,009</td>
                  <td>augue</td>
                  <td>semper</td>
                  <td>porta</td>
                  <td>Mauris</td>
                </tr>
                <tr>
                  <td>1,010</td>
                  <td>massa</td>
                  <td>Vestibulum</td>
                  <td>lacinia</td>
                  <td>arcu</td>
                </tr>
                <tr>
                  <td>1,011</td>
                  <td>eget</td>
                  <td>nulla</td>
                  <td>Class</td>
                  <td>aptent</td>
                </tr>
                <tr>
                  <td>1,012</td>
                  <td>taciti</td>
                  <td>sociosqu</td>
                  <td>ad</td>
                  <td>litora</td>
                </tr>
                <tr>
                  <td>1,013</td>
                  <td>torquent</td>
                  <td>per</td>
                  <td>conubia</td>
                  <td>nostra</td>
                </tr>
                <tr>
                  <td>1,014</td>
                  <td>per</td>
                  <td>inceptos</td>
                  <td>himenaeos</td>
                  <td>Curabitur</td>
                </tr>
                <tr>
                  <td>1,015</td>
                  <td>sodales</td>
                  <td>ligula</td>
                  <td>in</td>
                  <td>libero</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

            </div> <!-- /container -->

        </div>

        <footer class="site-footer push">This is a footer</footer>

        <!-- Pushy JS -->
        <script src="sources/js/pushy.min.js"></script>
        <script src="assets/js/ie10-viewport-bug-workaround.js"></script>
        <script src="jquery/jquery.min.js"></script>
        <script src="dist/js/bootstrap.min.js"></script>

    </body>
</html>
